<!DOCTYPE html>
<html>

<head>
    <title>SM的个人简历</title>
    <link rel="stylesheet" href="loading.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.js"></script>
    <script src="https://at.alicdn.com/t/font_718479_0jmzdzvve9wb.js"></script>
</head>

<body class='loadingBody'>
    <div id="siteWelcome" class="siteWelcome active">
        <div class="loading"></div>
    </div>
    <div id="NavBar" class="NavBar clearfix">
        <div class="logo">
            <span class="rs">Chaos</span><span class="card">SuperMan</span>
        </div>
        <nav class="NavBarList clearfix">
            <li>
                <a href="#siteAbout">关于</a>
            </li>
            <li>
                <a href="#siteSkill">技能</a>
            </li>
            <li class="menuTrigger">
                <a href="#siteWorks">作品</a>
                <ul class="subMenu">
                    <li>作品1</li>
                    <li>作品2</li>
                    <li>作品3</li>
                </ul>
            </li>
            <li class="menuTrigger">
                <a href="#">博客</a>
                <ul class="subMenu">
                    <li>作品1</li>
                    <li>作品2</li>
                    <li>作品3</li>
                </ul>
            </li>
            <li>
                <a href="#">日历</a>
            </li>
            <li>
                <a href="#">联系方式</a>
            </li>
            <li>
                <a href="#">其他</a>
            </li>
        </nav>
    </div>
    <div class="banner">
        <div class="mask"></div>
    </div>
    <section>
        <div data-x id="siteAbout" class="card clearfix animate">
            <div class="picture">
                <img src="img/avatar.jpg" alt="avatar">
            </div>
            <div class="text">
                <span class="welcome">Hello</span>
                <h1>陈思明</h1>
                <p>高级前端开发工程师弟子</p>
                <hr>
                <dl class="clearfix">
                    <dt>年龄</dt>
                    <dd>22</dd>
                    <dt>所在城市</dt>
                    <dd>杭州</dd>
                    <dt>邮箱</dt>
                    <dd>fakersfather@qq.com</dd>
                    <dt>手机</dt>
                    <dd>13578901234</dd>
                </dl>
            </div>
        </div>
        <div class="media">
            <a href="#">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-github"></use>
                </svg>
            </a>
            <a href="#">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-twitter"></use>
                </svg>
            </a>
            <a href="#">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-weibo"></use>
                </svg>
            </a>
        </div>
        <div class="resumeDownload-wrapper">
            <a class="resumeDownload" href="./resume.pdf" download>下载 PDF 简历</a>
        </div>
        <div class="introduce">
            <p>陈思明， 高级前端开发工程师弟子，资深前端讲师听课者</p>
            <p>技能：前端开发，Rails 开发，Node.js 开发</p>
        </div>
    </section>
    <section>
        <div data-x id="siteSkill" class="animate">
            <div class="skill-wrapper">
                <h1 class="skill">技能</h1>
            </div>
            <div class="skillBar">
                <ol class="clearfix">
                    <li>
                        <p>HTML 5 &amp; CSS 3</p>
                        <div class="skillMeter">
                            <div class="skillProgress" style="width: 10%;"></div>
                        </div>
                    </li>
                    <li>
                        <p>JavaScript</p>
                        <div class="skillMeter">
                            <div class="skillProgress" style="width: 20%;"></div>
                        </div>
                    </li>
                    <li>
                        <p>jQuery</p>
                        <div class="skillMeter">
                            <div class="skillProgress" style="width: 30%;"></div>
                        </div>
                    </li>
                    <li>
                        <p>Vue.js</p>
                        <div class="skillMeter">
                            <div class="skillProgress" style="width: 40%;"></div>
                        </div>
                    </li>
                    <li>
                        <p>React.js</p>
                        <div class="skillMeter">
                            <div class="skillProgress" style="width: 50%;"></div>
                        </div>
                    </li>
                    <li>
                        <p>Node.js</p>
                        <div class="skillMeter">
                            <div class="skillProgress" style="width:60%;"></div>
                        </div>
                    </li>
                </ol>
            </div>
        </div>
    </section>
    <section data-x id="siteWorks" class="animate">
        <div class="works-wrapper">
            <h1 class="works clearfix">作品集</h1>
        </div>
        <div id="mySlides">
            <div class="swiper-container">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <img src="img/web1.jpg" class="swiper-slide" />
                    <img src="img/web2.jpg" class="swiper-slide" />
                    <img src="img/web3.jpg" class="swiper-slide" />
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </section>
    <section class='message'>
        <h2>留言</h2>
        <ul id="messageList" class="messageList"></ul>
        <form id="postMessage" class="postMessage" action="POST">
            <label>用户:<input type="text" name="user"></label>
            <label>评论:<input type="text" name="content"></label>
            <input type="submit" class="submit" value="提交">
        </form>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage@3.9.0/dist/av-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
    <script src="js/swiper轮播组件.js"></script>
    <script src="js/二级菜单.js"></script>
    <script src="js/点击滑动页面.js"></script>
    <script src="js/留言.js"></script>
    <script src="js/粘性导航.js"></script>
    <script src="js/自动上浮.js"></script>
</body>
<script src="js/加载动画.js"></script>

</html>
